<template>
	<view class="y-flex" @tap="handleTap"
	:style="{
		'background-color': plain ? 'rgba(0,0,0,0)' : themeColor,
		'padding-top': paddingTopBottom,
		'padding-bottom': paddingTopBottom,
		'padding-left': paddingLeftRight,
		'padding-right': paddingLeftRight,
		'border-radius': pixelunit(radius),
		'border-width': plain ? '1px' : '',
		'border-style': 'solid',
		'border-color': type == 'default' ? '#333' : themeColor,
		'opacity': disabled ? 0.5 : 1
	}">
		<com-text class="y-flex-1" align="center" :size="size" :lines="lines" :color="fontColor" :value="value"></com-text>
	</view>
</template>

<script>
	import { pixelunit } from '@/assets/js/util.js'
	export default {
		props: {
			value: {
				type: String,
				default: ''
			},
			size: {
				type: [Number, String],
				default: 20
			},
			lines: {
				type: Number,
				default: 1
			},
			color: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: ''
			},
			plain: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: 'default'
			},
			radius: {
				type: [Number, String],
				default: 5
			},
			padding: {
				type: [Number, String],
				default: '10rpx 20rpx'
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			pixelunit () {
				return pixelunit
			},
			themeColor () {
				return this.bgColor || this.themeColors[this.type]
			},
			fontColor () {
				return this.color || (this.type == 'default' ? '#333' : this.plain && this.type != 'default' ? this.themeColor : '#fff')
			},
			paddingTopBottom () {
				const paddings = this.padding.split(' ')
				return pixelunit(paddings[0] || 0)
			},
			paddingLeftRight () {
				const paddings = this.padding.split(' ')
				return pixelunit(paddings[1] || paddings[0] || 0)
			}
		},
		data () {
			return {
				themeColors: {
					'default': '#ffffff',
					'primary': '#007aff',
					'success': '#4cd964',
					'warning': '#f0ad4e',
					'error': '#dd524d'
				}
			}
		},
		methods: {
			handleTap (e) {
				this.$emit('click', e)
			}
		}
	}
</script>

<style>
</style>